<template>
  <div>
    <Row :gutter="20">
      <i-col :xs="12" :md="8" :lg="4" v-for="(infor, i) in inforCardData" :key="`infor-${i}`" style="height: 120px;padding-bottom: 10px;">
        <infor-card shadow :color="infor.color" :icon="infor.icon" :icon-size="36">
          {{infor.count}}
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Row :gutter="20" class="margin-top-10">
      <i-col :md="24" :lg="8" class="margin-bottom-20">
        <Card shadow>
          <chart-pie v-if="turn" style="height: 300px;" :value="pieData" text="填报数据"></chart-pie>
        </Card>
      </i-col>
      <i-col :md="24" :lg="16" class="margin-bottom-20">
        <Card shadow>
          <chart-bar v-if="turn" style="height: 300px;" :value="barData" text="审核数量统计"/>
        </Card>
      </i-col>
    </Row>
    <!-- <Row>
      <Card shadow>
        <example style="height: 310px;"/>
      </Card>
    </Row> -->
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import { ChartPie, ChartBar } from '_c/charts'
import Example from './example.vue'
import { pieChart } from '@/api/budget'
export default {
  name: 'home',
  components: {
    InforCard,
    ChartPie,
    ChartBar,
    Example
  },
  data () {
    return {
      turn: false,
      inforCardData: [
        // { title: '新增用户', icon: 'md-person-add', count: 803, color: '#2d8cf0' },
        { title: '审核通过', icon: 'md-locate', count: 0, color: '#19be6b' },
        { title: '未上报', icon: 'md-help-circle', count: 0, color: '#ff9900' },
        // { title: '分享统计', icon: 'md-share', count: 657, color: '#ed3f14' },
        // { title: '新增互动', icon: 'md-chatbubbles', count: 12, color: '#E46CBB' },
        { title: '已上报', icon: 'md-map', count: 0, color: '#9A66E4' }
      ],
      pieData: [
        { value: 0, name: '未上报' },
        { value: 0, name: '审核通过' },
        { value: 0, name: '已上报' }
      ],
      barData: {
        '审核通过': 0,
        '未上报': 0,
        '已上报': 0
      }
    }
  },
  methods: {
    initPie () {
      pieChart().then((res) => {
        let data = res.data
        this.pieData.map(item => {
          if (item.name === '未上报') item.value = data.data.no
          if (item.name === '审核通过') item.value = data.data.pass
          if (item.name === '已上报') item.value = data.data.wait
        })
        this.inforCardData.map(item => {
          if (item.title === '未上报') item.count = data.data.no
          if (item.title === '审核通过') item.count = data.data.pass
          if (item.title === '已上报') item.count = data.data.wait
        })
        this.barData['未上报'] = data.data.no
        this.barData['审核通过'] = data.data.pass
        this.barData['已上报'] = data.data.wait
        this.turn = true
      })
    }
  },
  created () {
    this.initPie()
  }
}
</script>

<style lang="less">
.count-style{
  font-size: 50px;
}
</style>
